@import "compass/reset";
@import "compass/css3";
@import "compass/css3/animation";

*{margin:0;paddnig:0px;border:0px;text-decoration:none;}

.clearfix {
	*zoom:1
}

.clearfix:before,.clearfix:after {
	display:table;
	line-height:0px;
	content:"";
}
.clearfix:after {
	clear:both;
}

.change {
	@include animation-name(firstball);
	@include animation-duration(3s);
	@include animation-iteration-count(infinite);
	@include animation-direction(alternate);
}

@mixin auto1 {
	@extend .change;
	@include keyframes(firstball) {
		from { left:0px; 
				top:0px;}
		to { left:0px; top:20px;}
	}
}
body {
	// color:#666;
	width:1345px;
	background-color:#f8faf3;
}
#header {
	width:1085px;
	height:65px;
	padding:0 130px;
	background:#6f9f00;
	border-bottom:3px solid #bed299;
	.logo {
		float:left;
		// width:120px;
		// height:40px;
	    margin:12.5px 0px;
	}
	.nav-head {
		float:left;
		.nav-cont{
			display:inline-block;
			line-height:65px;
			a{
				padding:5px 10px;
				color:#fff;
				font-size:20px;
				@include border-radius(10px);
				&:hover {
					background:#507110;
				}
			}
			.first {
					background:#507110;
				}
		}
	}
}
.h-right{
	position:relative;
	margin-top:15px;
	float:right;
	width:200px;
	height:50px;
	.user-cont {
		width:180px;
		height:45px;
		@include border-radius(43px);
		background:#c0d29e;
		.user-logo {
			display:inline-block;
			width:40px;
			height:40px;
			margin:2px 3px;
			@include border-radius(40px);
			vertical-align:middle;
		}
		.user-name {
			display:inline-block;
			// font-weight:bold;
			font-size:16px;
			cursor:pointer;
			color:#709e18;
			.user-border {
				display:inline-block;
				border-color:#78a325 transparent transparent transparent;
				border-style:solid;
				border-width:6px 5px 0px 4px; 
			}
		}
	}
	.user-menu {
		display:none;
		position:absolute;
		width:70%;
		margin-left:20px;
		// border:1px solid #f4aa28;
		background:#fff;
		.user-menu-cont {
			color:black;
			font-size:14px;
			margin:15px;
			z-index:1px;
			a {
				color:black;
			}
		}
	} 
	.email {
		position:relative;
		left:180px;
		top:-40px;
		margin:10px 5px;
		width:20px;
		height:20px;
		img {
			width:25px;
			height:15px;
		}
		span {
			width:10px;
			height:10px;
			@include border-radius(10px);
			position:absolute;
			left:20px;
			top:-4px;
			background-color:#f4aa28;
		}
	}
}

#content {
	margin:20px 180px 0px;
	// border:1px solid black;
}
#cont-left {
	float:left;
	width:65%;
	background:#fff;
	border:1px solid #B8B8B8;
	@include box-shadow(2px 2px 2px #B8B8B8);
	@include border-radius(10px);
	h3 {
		font-size:23px;
		font-weight:bold;
		margin:20px 0px;
		text-align:center;
	}
}
.cl-top {
	position:relative;
	width:100%;
	height:400px;
	// border:1px solid red;
}
.box-one {
	position:absolute;
	width:100px;
	height:100px;
	margin-left:100px;
	margin-top:150px;
	@include border-radius(100px);
	border:20px solid #f09f11;
	background:#f1a217;
	@include auto1;
	&:hover {
		width:130px;
		height:130px;
		@include border-radius(150px);
		background:#fff;
		padding:10px;
		border:20px solid #f09f11;
				p {
			color:#f09f11;
			font-weight:bold;
			font-size:20px;
			text-align:center;
		}
	}
	p {
		color:#fff;
		font-weight:bold;
		font-size:16px;
		text-align:center;
	}
}
.box-two {
	width:100px;
	height:100px;
	@include border-radius(100px);
	background:#f3f3f3;
	position:absolute;
	left:230px;
	top:120px;
	@include animation(secondball 3s infinite alternate);
	@include keyframes(secondball) {
		from {top:120px;}
		to {top:100px;}
	}
	// @include auto1;
 }
 .box-three {
 	width:90px;
 	height:90px;
 	border:20px solid #7dbe0f;
 	background:#85c51e;
 	@include border-radius(110px);
 	position:absolute;
 	left:280px;
 	top:180px;
 	@include animation(thirdball 2s infinite alternate);
 	@include keyframes(thirdball) {
 		from {top:180px;}
 		to {top:205px;}
 	}
 	&:hover {
 	// 	width:130px;
		// height:130px;
		// @include border-radius(150px);
		// background:#fff;
		// padding:10px;
		// border:20px solid gray;
		// p {
		// 	color:gray;
		// 	font-weight:bold;
		// 	font-size:20px;
		// 	text-align:center;
		// }
		//用transform(scale())实现
		@include transform(scale(1.3,1.3));
		background:#fff;
		p {
			color:#7dbe0f;
			font-weight:bold;
			font-size:20px;
			text-align:center;
		}
 	}
 	p {
 		text-align:center;
 		color:#fff;
 		font-weight:bold;
 	}
 }
 .box-four {
 	position:absolute;
 	left:450px;
 	top:150px;
 	width:100px;
 	height:100px;
 	padding:10px;
 	@include border-radius(80px);
 	background:#2ba8d7;
 	z-index:2;
 	@include animation(thirdball 1.5s infinite alternate);
 	@include keyframes(thirdball){
 		from {top:150px;}
 		to {top:180px;}
 	}
 	.ball1 {
		 width:80px;
		 height:80px;
		 padding:10px;
		@include border-radius(95px);
		background:#32addb;
		.ball2 {
			width:80px;
			height:80px;
			@include border-radius(105px);
			background:#32addb;
			p {
				color:#fff;
				font-weight:bold;
				text-align:center;
			}
			.ball2-pa {
					line-height:40px;
				}
		 }
 	}
 	&:hover {
 		width:120px;
 		height:120px;
 		border:20px solid #32addb;
 		@include border-radius(140px);
 		background:#fff;
 		.ball1 {
 			background:none;
 			.ball2 {
 				background:none;
 				p {
 					color:#2ba8d7;
					font-weight:bold;
					text-align:center;
					font-size:23px;
					margin-left:4px;
 				}
 			}
 		}
 		
 	}
 }
 .box-five {
 	width:70px;
 	height:70px;
 	@include border-radius(70px);
 	background:#f3f3f3;
 	position:absolute;
 	right:140px;
 	bottom:60px;
 	z-index:1;
 	@include animation(fiveball 2.3s infinite alternate);
 	@include keyframes(fiveball){
 		from {bottom:60px;}
 		to {bottom:85px;}
 	}
 }
.cl-middle {
	width:500px;
	height:500px;
	margin:20px auto;
	// border:1px solid red;
	@include border-radius(10px);
	@include box-shadow(0 0 8px #d4d4d4);
	overflow:hidden;
}
// .cont-one {
// 	
// }
.nav {
	width:100%;
	height:30px;
	li {
		width:50%;
		display:inline-block;
		float:left;
		text-align:center;
		line-height:30px;
	}
}
.show {
	background:#85c51f;
}
.cont-one {
	width:100%;
	height:350px;
	// border:1px solid red;
	position:relative;
}

.first{
	@include transition(0.5s);
}

.first:hover {
	@include transform(scale(1.2));
}

.other {
	div {
		position:relative;
		display:inline-block;
		width:30%;
		// margin-top:40px;
		// border:1px solid blue;
		img {
			margin-left:10px;
			vertical-align:middle;
		}
		p {
			position:absolute;
			left:70px;
			top:13px;
		}
	}
}
.cl-bottom {
	width:450px;
	height:350px;
	margin-left:140px;
	margin-bottom:20px;
	border:1px solid #ECECEC;
	@include border-radius(0 0 8px #d4d4d4);
	position:relative;
	.cl-cont1 p{
		color:orange;
		text-align:center;
		font-weight:bold;
		font-size:23px;
		position:relative;
		top:200px;
		@include animation(cont 3s infinite alternate);
		@include keyframes(cont){
			from {top:200px;}
			to {top:50px;}
		}
	}
	.cl-navone {
		
		ul {
			// border:1px solid red;
			text-align:center;
			li {
				display:inline-block;
				padding:4px 8px;
				background:#f3f3f3;
				@include border-radius(3px);
				font-weight:bold;
				font-size:14px;

			}
			.navone-show {
				background:#85c51f;
				color:#fff;
			}
		}
	}
	.cl-navtwo {
		position:absolute;
		left: -80px;
		top:0;
		// overflow:hidden;
		// border:1px solid purple;
		ul {
			li {
				padding:5px 10px;
				width:60px;
				height:20px;
				margin-bottom:10px;
				border:1px solid #ECECEC;
				text-align:center;
				@include border-radius(5px);
				// z-index: -1;

			}
			.navtwo-show {
				background:#f4aa28;
			}
		}
	}
}
.cl-cont,.cl-allday {
	display:none;
}
#cont-right {
	float:left;
	margin-left:40px;
	// border:1px solid green;
	width:300px;	
	}
.r-first {
	// border:1px solid red;
	padding:30px;
	background:#fff;
	@include box-shadow(1px 1px 4px #ccc);
	@include border-radius(10px);
	h3 {
		color:#666;
		position:relative;
		margin-bottom:20px;
		text-align:center;
		font-weight:bold;
		font-size:20px;
		z-index:-1;
		span {
			position:absolute;
			left:35px;
			top:-3px;
			width:33px;
			height:30px;
			background:url(../img/king.png) no-repeat;
		}
	}
}
.day {
	text-align:center;
	li {
		display:inline-block;
		padding:5px 10px;
		@include border-radius(5px);
		overflow:hidden;
		background:#f3f3f3;
	}
	.show {
		background:#7ebf12;
	}
}
.day-cont {
	text-align:center;
	margin-top:10px;
	// border:1px solid red;
	.rade {
		// float:left;
		display:inline-block;
		vertical-align:middle;
		position:relative;
		top:-10px;
		width:30px;
		height:30px;
		padding-top:5px;
		padding-left:4px;
		background:url(../img/medal.png) 0px 0px;
		// padding:5px 0px 0px 4px;
		color:#fb742a;
	}
	img {
		// float:left;
		width:30px;
		height:30px;
		// margin:0px 10px;
		margin-left:-3px;
		margin-right:10px;
		@include border-radius(30px);
	}
}
.day-cont-right {
	// border:1px solid blue;
	float:left;
}
.name {
	font-size:14px;
	color:gray;
 }

.kilo {     
	color:#fb742a;
	margin-left:33px;
}
.jindu {
	width:150px;
	height:10px;
	margin-top:3px;
	background:#c6e5f1;
	overflow:hidden;
	@include border-radius(5px);
}
.jindu1 {
	display:block;
	width:60%;
	height:100%;
	background:#2aa8d7;
}
.r-second {
	// border:1px solid blue;
	margin-top:15px;
	padding:5px;
	h3 {
		color:green;
		font-size:20px;
		text-align:center;		
	}
}
.love {
	margin:20px 0px;
}
.rs-pic {
	width:100%;
	height:200px;
	background:#c6e5f1;
}
.pub {
	float:left;
	color:#666;
	font-size:16px;
}
.rever {
	float:left;
	width:150px;
	height:10px;
	margin:6px 4px 0px;
	@include border-radius(10px);
	background:#f3f3f3;
}
.r-third {
	width:100%;
	// border:1px solid blue;
	margin:30px 0px;
	h3 {
		font-size:20px;
		color:#85c51f;
		font-weight:bold;
	}
}
.clone {
	a {
		width:100%;
		display:inline-block;
		color:green;
		margin:20px 0px;
		font-size:14px;
	}
	p {
		width:100%;
		line-height:1.5em;
	}
}
#footer {
	width:100%;
	border-top:5px solid #709e18;
	padding:20px;
	margin-top:4px;
	text-align:center;
	background:#c9d9b3;
	a {
		color:green;
	}
	p {
		font-size:12px;
		margin:10px 0px 10px 20px;
	}
}








